<!DOCTYPE html>
<head>
    <meta charset="utf-8">
    <title>ECharts</title>
</head>

<body>
<!-- 为ECharts准备一个具备大小（宽高）的Dom -->
<div id="main_orgStructure" style="width:1200px; height:400px;position: absolute; top: 10%; left: 10%;"></div>
<!-- ECharts单文件引入 -->
<script src="http://echarts.baidu.com/build/dist/echarts.js"></script>
<script type="text/javascript">
    // 路径配置
    require.config({
        paths: {
            echarts: 'http://echarts.baidu.com/build/dist'
        }
    });
    // 使用
    require(
        [
            'echarts',
            'echarts/chart/tree' // 使用树状图就加载tree模块，按需加载
        ],
        function (ec) {
            // 基于准备好的dom，初始化echarts图表
            var myChart = ec.init(document.getElementById('main_orgStructure'));
            var commonStyle = {

            }
            var option = {
                title : {
                    text: '组织结构图'
                },
                tooltip : {
                    show: false,
                    trigger: 'item',
                    formatter: "{b}: {c}"
                },
                toolbox: {
                    // show : true,
                    // feature : {
                    //     mark : {show: true},
                    //     dataView : {show: true, readOnly: false},
                    //     restore : {show: true},
                    //     saveAsImage : {show: true}
                    // }
                },
                calculable : false,
                series : [
                    {
                        name:'树图',
                        type:'tree',
                        orient: 'vertical',  // vertical horizontal
                        rootLocation: {x: '50%', y: '15%'}, // 根节点位置  {x: 'center',y: 10}
                        nodePadding: 20,
                        layerPadding:40,
                        symbol: 'rectangle',
                        borderColor:'black',
                        itemStyle: {
                            normal: {
                                color: '#fff',//节点背景色
                                label: {
                                    show: true,
                                    position: 'inside',
                                    textStyle: {
                                        color: 'black',
                                        fontSize: 15,
                                        //fontWeight:  'bolder'
                                    }
                                },
                                lineStyle: {
                                    color: '#000',
                                    width: 1,
                                    type: 'broken' // 'curve'|'broken'|'solid'|'dotted'|'dashed'
                                }
                            },
                            emphasis: {
                                label: {
                                    show: false
                                }
                            }
                        },
                        data: [
                            {
                                name: '销售部',
                                //图片大小
                                // symbolSize: [60, 80],
                                //自定义图片
                                // symbol: 'image://https://fuss10.elemecdn.com/1/34/19aa98b1fcb2781c4fba33d850549jpeg.jpeg',
                                children: [
                                    {
                                        name: '长宁长顺路营销服务部张扬部1',
                                        symbol: 'rect',
                                        lineStyle: {
                                            color: "white"
                                        },
                                        symbolSize: [100, 40],
                                        children: [
                                            {
                                                name: '李大1212',
                                                // symbol: 'image://https://fuss10.elemecdn.com/a/3f/3302e58f9a181d2509f3dc0fa68b0jpeg.jpeg',
                                                symbol: 'circle',
                                                symbolSize: [60, 80],
                                                lineStyle: {
                                                    color: "white"
                                                }
                                            },
                                            {
                                                name: '利尔12121',
                                                // symbol: 'image://https://fuss10.elemecdn.com/0/6f/e35ff375812e6b0020b6b4e8f9583jpeg.jpeg',
                                                symbol: 'circle',
                                                symbolSize: [60, 80],
                                                lineStyle: {
                                                    color: "white"
                                                }
                                            },
                                            {
                                                name: '离散',
                                                // symbol: 'image://https://cube.elemecdn.com/6/94/4d3ea53c084bad6931a56d5158a48jpeg.jpeg',
                                                symbolSize: [60, 80],
                                                lineStyle: {
                                                    color: "white"
                                                }
                                            },
                                            {
                                                name: '李屋',
                                                // symbol: 'image://https://fuss10.elemecdn.com/3/28/bbf893f792f03a54408b3b7a7ebf0jpeg.jpeg',
                                                symbolSize: [60, 80],
                                                lineStyle: {
                                                    color: "white"
                                                }
                                            }
                                        ]
                                    },
                                    {
                                        name: '长宁长顺路营销服务部张扬部2',
                                        symbol: 'circle',
                                        symbolSize: [60, 60],
                                        // lineStyle: {
                                        //     color: "#aaa"
                                        // },
                                        children: [
                                            {
                                                name: '王一',
                                                // symbol: 'image://https://fuss10.elemecdn.com/9/bb/e27858e973f5d7d3904835f46abbdjpeg.jpeg',
                                                symbolSize: [60, 80],
                                                lineStyle: {
                                                    color: "white"
                                                }
                                            },
                                            {
                                                name: '网二',
                                                // symbol: 'image://https://fuss10.elemecdn.com/d/e6/c4d93a3805b3ce3f323f7974e6f78jpeg.jpeg',
                                                symbolSize: [60, 80],
                                                lineStyle: {
                                                    color: "white"
                                                }
                                            }
                                        ]
                                    },
                                    {
                                        name: '长宁长顺路营销服务部张扬部3',
                                        symbol: 'circle',
                                        symbolSize: [60, 60],
                                        lineStyle: {
                                            color: "#aaa"
                                        },
                                        children: [
                                            {
                                                name: '六大',
                                                // symbol: 'image://https://fuss10.elemecdn.com/3/28/bbf893f792f03a54408b3b7a7ebf0jpeg.jpeg',
                                                symbolSize: [60, 80],
                                                lineStyle: {
                                                    color: "#aaa"
                                                }
                                            },
                                            {
                                                name: '六二',
                                                // symbol: 'image://https://fuss10.elemecdn.com/2/11/6535bcfb26e4c79b48ddde44f4b6fjpeg.jpeg',
                                                symbolSize: [60, 80],
                                                lineStyle: {
                                                    color: "#aaa"
                                                }
                                            }
                                        ]
                                    },
                                    {
                                        name: '长宁长顺路营销服务部张扬4',
                                        symbol: 'circle',
                                        symbolSize: [60, 60],
                                        // lineStyle: {
                                        //     color: "green"
                                        // },
                                        children: [
                                            {
                                                name: '张一',
                                                // symbol: 'image://https://fuss10.elemecdn.com/a/3f/3302e58f9a181d2509f3dc0fa68b0jpeg.jpeg',
                                                symbolSize: [60, 80],
                                                lineStyle: {
                                                    color: "#aaa"
                                                }
                                            },
                                            {
                                                name: '张二',
                                                // symbol: 'image://https://fuss10.elemecdn.com/3/28/bbf893f792f03a54408b3b7a7ebf0jpeg.jpeg',
                                                symbolSize: [60, 80],
                                                lineStyle: {
                                                    color: "#aaa"
                                                }
                                            }
                                        ]
                                    },
                                    {
                                        name: '长宁长顺路营销服务部张扬5',
                                        symbol: 'circle',
                                        symbolSize: [60, 60],
                                        // lineStyle: {
                                        //     color: "green"
                                        // },
                                        children: [
                                            {
                                                name: '张一',
                                                // symbol: 'image://https://fuss10.elemecdn.com/a/3f/3302e58f9a181d2509f3dc0fa68b0jpeg.jpeg',
                                                symbolSize: [60, 80],
                                                lineStyle: {
                                                    color: "#aaa"
                                                }
                                            },
                                            {
                                                name: '张二',
                                                // symbol: 'image://https://fuss10.elemecdn.com/3/28/bbf893f792f03a54408b3b7a7ebf0jpeg.jpeg',
                                                symbolSize: [60, 80],
                                                lineStyle: {
                                                    color: "#aaa"
                                                }
                                            }
                                        ]
                                    },
                                    {
                                        name: '长宁长顺路营销服务部张扬6',
                                        symbol: 'circle',
                                        symbolSize: [60, 60],
                                        // lineStyle: {
                                        //     color: "green"
                                        // },
                                        children: [
                                            {
                                                name: '张一',
                                                // symbol: 'image://https://fuss10.elemecdn.com/a/3f/3302e58f9a181d2509f3dc0fa68b0jpeg.jpeg',
                                                symbolSize: [60, 80],
                                                lineStyle: {
                                                    color: "#aaa"
                                                }
                                            },
                                            {
                                                name: '张二',
                                                // symbol: 'image://https://fuss10.elemecdn.com/3/28/bbf893f792f03a54408b3b7a7ebf0jpeg.jpeg',
                                                symbolSize: [60, 80],
                                                lineStyle: {
                                                    color: "#aaa"
                                                }
                                            }
                                        ]
                                    }


                                ]
                            }
                        ]
                        // data: [
                        //     {
                        //         name: '董事会',
                        //         value: 6,
                        //         symbolSize: [70, 30],
                        //         symbol: 'rectangle',
                        //         itemStyle: {
                        //             normal: {
                        //                 borderWidth: 2,
                        //                 borderColor: 'black'
                        //             }
                        //         },
                        //         children: [
                        //             {
                        //                 name: '总经理',
                        //                 value: 6,
                        //                 symbolSize: [70, 30],
                        //                 symbol: 'rectangle',
                        //                 itemStyle: {
                        //                     normal: {
                        //                         borderWidth: 2,
                        //                         borderColor: 'black'
                        //                     }
                        //                 },
                        //                 children: [
                        //                     {
                        //                         name: '营销中心',
                        //                         value: 4,
                        //                         symbolSize: [70, 30],
                        //                         symbol: 'rectangle',
                        //                         itemStyle: {
                        //                             normal: {
                        //                                 label: {
                        //                                     show: true,
                        //                                     position: 'inside'
                        //                                 },
                        //                                 borderWidth: 2,
                        //                                 borderColor: 'black'
                        //                             }
                        //                         },
                        //                         children: [
                        //                             {
                        //                                 name: '市场部',
                        //                                 value: 4,
                        //                                 symbolSize: [60, 30],
                        //                                 symbol: 'rectangle',
                        //                                 itemStyle: {
                        //                                     normal: {
                        //                                         label: {
                        //                                             show: true,
                        //                                             position: 'inside'
                        //                                         },
                        //                                         borderWidth: 2,
                        //                                         borderColor: 'black'
                        //                                     }
                        //                                 },
                        //                             },
                        //                             {
                        //                                 name: '销售部',
                        //                                 value: 4,
                        //                                 symbolSize: [60, 30],
                        //                                 symbol: 'rectangle',
                        //                                 itemStyle: {
                        //                                     normal: {
                        //                                         label: {
                        //                                             show: true,
                        //                                             position: 'inside'
                        //                                         },
                        //                                         borderWidth: 2,
                        //                                         borderColor: 'black'
                        //                                     }
                        //                                 },
                        //                             },
                        //                             {
                        //                                 name: '客服部',
                        //                                 value: 4,
                        //                                 symbolSize: [60, 30],
                        //                                 symbol: 'rectangle',
                        //                                 itemStyle: {
                        //                                     normal: {
                        //                                         label: {
                        //                                             show: true,
                        //                                             position: 'inside'
                        //                                         },
                        //                                         borderWidth: 2,
                        //                                         borderColor: 'black'
                        //                                     }
                        //                                 },
                        //                             }
                        //                         ]
                        //                     },
                        //                     {
                        //                         name: '项目中心',
                        //                         value: 4,
                        //                         symbolSize: [70, 30],
                        //                         symbol: 'rectangle',
                        //                         itemStyle: {
                        //                             normal: {
                        //                                 label: {
                        //                                     show: true,
                        //                                     position: 'inside'
                        //                                 },
                        //                                 borderWidth: 2,
                        //                                 borderColor: 'black'
                        //                             }
                        //                         },
                        //                         children: [
                        //                             {
                        //                                 name: '售前支持部',
                        //                                 value: 4,
                        //                                 symbolSize: [90, 30],
                        //                                 symbol: 'rectangle',
                        //                                 itemStyle: {
                        //                                     normal: {
                        //                                         label: {
                        //                                             show: true,
                        //                                             position: 'inside'
                        //                                         },
                        //                                         borderWidth: 2,
                        //                                         borderColor: 'black'
                        //                                     }
                        //                                 },
                        //                             },
                        //                             {
                        //                                 name: '项目一部',
                        //                                 value: 4,
                        //                                 symbolSize: [70, 30],
                        //                                 symbol: 'rectangle',
                        //                                 itemStyle: {
                        //                                     normal: {
                        //                                         label: {
                        //                                             show: true,
                        //                                             position: 'inside'
                        //                                         },
                        //                                         borderWidth: 2,
                        //                                         borderColor: 'black'
                        //                                     }
                        //                                 },
                        //                             },
                        //                             {
                        //                                 name: '项目二部',
                        //                                 value: 4,
                        //                                 symbolSize: [70, 30],
                        //                                 symbol: 'rectangle',
                        //                                 itemStyle: {
                        //                                     normal: {
                        //                                         label: {
                        //                                             show: true,
                        //                                             position: 'inside'
                        //                                         },
                        //                                         borderWidth: 2,
                        //                                         borderColor: 'black'
                        //                                     }
                        //                                 },
                        //                             },
                        //                             {
                        //                                 name: '项目三部',
                        //                                 value: 4,
                        //                                 symbolSize: [70, 30],
                        //                                 symbol: 'rectangle',
                        //                                 itemStyle: {
                        //                                     normal: {
                        //                                         label: {
                        //                                             show: true,
                        //                                             position: 'inside'
                        //                                         },
                        //                                         borderWidth: 2,
                        //                                         borderColor: 'black'
                        //                                     }
                        //                                 },
                        //                             }
                        //                         ]
                        //                     },
                        //                     {
                        //                         name: '技术中心',
                        //                         value: 4,
                        //                         symbolSize: [70, 30],
                        //                         symbol: 'rectangle',
                        //                         itemStyle: {
                        //                             normal: {
                        //                                 label: {
                        //                                     show: true,
                        //                                     position: 'inside'
                        //                                 },
                        //                                 borderWidth: 2,
                        //                                 borderColor: 'black'
                        //                             }
                        //                         },
                        //                         children: [
                        //                             {
                        //                                 name: '开发部',
                        //                                 value: 4,
                        //                                 symbolSize: [70, 30],
                        //                                 symbol: 'rectangle',
                        //                                 itemStyle: {
                        //                                     normal: {
                        //                                         label: {
                        //                                             show: true,
                        //                                             position: 'inside'
                        //                                         },
                        //                                         borderWidth: 2,
                        //                                         borderColor: 'black'
                        //                                     }
                        //                                 },
                        //                             },
                        //                             {
                        //                                 name: '设计部',
                        //                                 value: 4,
                        //                                 symbolSize: [70, 30],
                        //                                 symbol: 'rectangle',
                        //                                 itemStyle: {
                        //                                     normal: {
                        //                                         label: {
                        //                                             show: true,
                        //                                             position: 'inside'
                        //                                         },
                        //                                         borderWidth: 2,
                        //                                         borderColor: 'black'
                        //                                     }
                        //                                 },
                        //                             },
                        //                             {
                        //                                 name: '系统部',
                        //                                 value: 4,
                        //                                 symbolSize: [70, 30],
                        //                                 symbol: 'rectangle',
                        //                                 itemStyle: {
                        //                                     normal: {
                        //                                         label: {
                        //                                             show: true,
                        //                                             position: 'inside'
                        //                                         },
                        //                                         borderWidth: 2,
                        //                                         borderColor: 'black'
                        //                                     }
                        //                                 },
                        //                             }
                        //                         ]
                        //                     },
                        //                     {
                        //                         name: '行政部',
                        //                         value: 4,
                        //                         symbolSize: [70, 30],
                        //                         symbol: 'rectangle',
                        //                         itemStyle: {
                        //                             normal: {
                        //                                 label: {
                        //                                     show: true,
                        //                                     position: 'inside'
                        //                                 },
                        //                                 borderWidth: 2,
                        //                                 borderColor: 'black'
                        //                             }
                        //                         }
                        //                     },
                        //                     {
                        //                         name: '财务部',
                        //                         value: 4,
                        //                         symbolSize: [70, 30],
                        //                         symbol: 'rectangle',
                        //                         itemStyle: {
                        //                             normal: {
                        //                                 label: {
                        //                                     show: true,
                        //                                     position: 'inside'
                        //                                 },
                        //                                 borderWidth: 2,
                        //                                 borderColor: 'black'
                        //                             }
                        //                         }
                        //                     },
                        //                     {
                        //                         name: '其他分支',
                        //                         value: 4,
                        //                         symbolSize: [70, 30],
                        //                         symbol: 'rectangle',
                        //                         itemStyle: {
                        //                             normal: {
                        //                                 label: {
                        //                                     show: true,
                        //                                     position: 'inside'
                        //                                 },
                        //                                 borderWidth: 2,
                        //                                 borderColor: 'black'
                        //                             }
                        //                         },
                        //                         children: [
                        //                             {
                        //                                 name: '汕头分公司',
                        //                                 value: 4,
                        //                                 symbolSize: [90, 30],
                        //                                 symbol: 'rectangle',
                        //                                 itemStyle: {
                        //                                     normal: {
                        //                                         label: {
                        //                                             show: true,
                        //                                             position: 'inside'
                        //                                         },
                        //                                         borderWidth: 2,
                        //                                         borderColor: 'black'
                        //                                     }
                        //                                 },
                        //                             }
                        //                         ]
                        //                     },
                        //                 ]
                        //             }]
                        //     }
                        // ]
                    }
                ]
            };
            // 为echarts对象加载数据
            myChart.setOption(option);
        });
</script>
</body>
